<template>
  <div class="app-container" style="height:610px">
    <div style="position: relative; height:45%">
      <div class="mjob2_center_sq_bt">
        申请
      </div>
      <div>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('个人借款', 'personalLoan')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">个人借款</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('采购申请', 'purchase' )">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">采购申请</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('入职', 'entry')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">入职</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('离职', 'quit')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">离职</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('加班', 'workOvertime')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">加班</div>
        </a>
      </div>
    </div>
    <div style="position: relative;">
      <div class="mjob2_center_sq_bt">
        报销
      </div>
      <div>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('费用报销', 'reimbursements')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">费用报销</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('冲款', 'writeOff' )">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">冲款</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('补贴', 'subsidy')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">补贴</div>
        </a>
        <a class="mjob2_center_sq_nr_qj" @click="changeMenu('工资', 'wages')">
          <div class="mjob2_center_sq_nr_qj_tb"></div>
          <div class="mjob2_center_sq_nr_qj_wz">工资</div>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['name'],
  data() {
    return {

    }
  },
  methods: {
    changeMenu(name, type) {
      let url = "";
      // 公共路由跳转
      if (this.name === 'apply' && type === 'personalLoan') {
        // 申请-个人借款页面
        url = '/apply/loan'
      } else if (this.name === 'apply' && type === 'purchase') {
        // 申请-采购申请
        url = '/apply/purchase'
      } else if (this.name === 'apply' && type === 'entry') {
        // 申请-入职
        url = '/apply/entry'
      } else if (this.name === 'apply' && type === 'quit') {
        // 申请-离职
        url = '/apply/quit'
      } else if (this.name === 'apply' && type === 'workOvertime') {
        // 申请-加班
        url = '/apply/workOvertime'
      } else if (this.name === 'apply' && type === 'reimbursement') {
        // 申请-报销
        url = '/apply/reimbursement'
      } else if (this.name === 'examine' && type === 'entry') {
        // 待我审批-入职
        url = '/examine/entry'
      } else if (this.name === 'examine' && type === 'entry') {
        // 我的申请
        url = '/examine/entry'
      }
      console.log('url', url, this.name)
      this.$router.push({
        path: url
      })
    }
  }
}
</script>
<style>
.mjob2_center_sq_bt {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 50px;
  font-size: 18px;
  padding: 0 15px;
  height: 50px;
  width: 100%;
}
.mjob2_center_sq_nr_qj {
  float: left;
  width: 120px;
  text-align: center;
  margin-top: 20px;
}
.mjob2_center_sq_nr_qj_tb {
  width: 62px;
  height: 62px;
  background: #3292e6;
  margin: auto;
  line-height: 62px;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.08);
  position: relative;
}
.mjob2_center_sq_nr_qj_wz {
  line-height: 35px;
  color: rgba(29, 33, 40, 0.7);
}
</style>



